<template>
  <div>
    <div style="margin-left: 38px; margin-top: 10px;line-height: 20px">
      <el-radio-group @change="handleSearch()" v-model="filters.dealState" style="margin-bottom: 4px;margin-right: 10px">
        <el-radio-button size="medium" label="-1">所有</el-radio-button>
        <el-radio-button size="medium" label="0">待审核</el-radio-button>
        <el-radio-button size="medium" label="1">待制函</el-radio-button>
        <el-radio-button size="medium" label="2">未通过</el-radio-button>
        <el-radio-button size="medium" label="3">待递送</el-radio-button>
        <el-radio-button size="medium" label="4">递送中</el-radio-button>
        <el-radio-button size="medium" label="5">已结束</el-radio-button>
      </el-radio-group>
      <el-input
        @keyup.enter.native="handleSearch()"
        style="float: right;width: 250px;margin-right: 20px"
        placeholder="合同编号"
        prefix-icon="el-icon-search"
        v-model="filters.contractNbr">
      </el-input>
      <el-input
        @keyup.enter.native="handleSearch()"
        style="float: right;width: 250px;margin-right: 20px"
        placeholder="借款人"
        prefix-icon="el-icon-search"
        v-model="filters.borrower">
      </el-input>
      <el-input
              @keyup.enter.native="handleSearch()"
              style="float: right;width: 250px;margin-right: 20px"
              placeholder="出款人"
              prefix-icon="el-icon-search"
              v-model="filters.lender">
      </el-input>
    </div>
    <div  style="background-color: #FFFFFF;margin: 0px 20px 0px 38px">
      <el-table v-loading="loading" element-loading-text="数据加载中"
        :data="domainList"
        style="width: 100%;min-height: 300px"
        max-height="400">
        <el-table-column prop="contractNbr" label="合同编号" width="80" />
        <el-table-column prop="lender" label="出借人" :show-overflow-tooltip="true" width="120" />
        <el-table-column prop="borrower" label="借款人" :show-overflow-tooltip="true" width="120" />
        <el-table-column prop="dealState" label="借款本金" width="120" />
        <el-table-column prop="annualRate" label="贷款利息" width="120" />
        <el-table-column prop="lendDate" label="出借时间" width="150" />
        <el-table-column prop="repayDate" label="还款时间" width="150" />
        <el-table-column prop="overdueAmount" label="逾期本金" width="120" />
        <el-table-column prop="overdueFineAmount" label="违约金" width="120" />
        <el-table-column prop="dealStateName" label="处理状态" width="120" />
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              @click="$router.push('/law/enterpriseContractMain/' + scope.row.id)"
              type="text"
              size="small">
              详情
            </el-button>
            <span style="margin-left: 5px">|</span>
            <el-button
              @click
              type="text"
              size="small">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        slot="page"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        :total="page.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;padding: 10px 20px 10px 0px"
        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import tgForm from '@/components/base/TG_FORM'

export default {
  name: 'ContractList',
  extends: tgForm,
  components: { tgForm},
  props: {
    orderId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      filters: {
        model: 'contract',
        dealState: -1
      },
      loading: false
    }
  },
  watch: {
    filters: function(curVal, oldVal){
      console.log(curVal);
    },
  },
  methods: {},
  created() {
    this.filters.orderId = this.orderId
  }
}
</script>

<style scoped>

</style>
